<template>
  <component
    :is="components[currentComponent]"
    @backMemoList="changeComponent"
  ></component>

  <van-floating-bubble :icon @click="changeComponent" v-model:offset="offset" />
</template>

<script setup>
import { ref } from 'vue';
import Memo from '@/features/memo/Memo.vue';
import MemoAdd from '@/features/memo/MemoAdd.vue';

const currentComponent = ref('Memo');
const offset = ref({ x: 24, y: 860 });
const icon = ref('plus');

const components = {
  Memo,
  MemoAdd,
};

function changeComponent() {
  currentComponent.value =
    currentComponent.value === 'Memo' ? 'MemoAdd' : 'Memo';

  icon.value = icon.value === 'plus' ? 'arrow-left' : 'plus';
}
</script>
